//访客驻留分析
var option1 = {
    title: {
        x: 'center',
        top: '5',
        textStyle: { //图例文字的样式
            color: '#a4cada',
            fontSize: 12
        }

    },
    tooltip: {
        trigger: 'item',
    },
    legend: {
        top: 'center',
        right: '20',
        icon: 'circle',
        orient: 'vertical',
        data: [],
        textStyle: { //图例文字的样式
            color: '#fff',
            fontSize: 12
        }
    },
    series: [{
        name: '数据',
        type: 'pie',
        radius: ['30%', '88%'],
        center: ['42%', '50%'],
        label: {
            normal: {
                show: false,
                position: 'center',
            },
            emphasis: {
                show: false,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        //color: ['#66de5f', '#e4c43c', '#de7d39', '#de3855', '#3655d8', '#7b3edf', '#2cedff'],
        labelLine: {
            normal: {
                show: true
            }
        },
        data: []
    }]
};

/*来源地排行 */
var option3 = {
    //backgroundColor : 'rgba(5, 48, 92, 0.3)',
    title: {
        text: '',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: '18'
        }
    },
    grid: {
        top: '4%',
        left: '1%',
        right: '8%',
        bottom: '3%',
        containLabel: true
    },

    tooltip: {
        trigger: 'axis'
    },
    calculable: true,
    xAxis: [{
        name: '人',
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: 'rgba(213,217,223,0.5)',
            }
        },
        nameTextStyle: {
            color: '#fff',
            fontSize: 10
        },
        type: 'value',
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '12'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#3e99c2',

            }
        }
    }],
    yAxis: [{
        type: 'category',
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '12'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#3e99c2'
            }
        },
        data: ['广东', '重庆', '四川', '浙江', '云南']
    }],
    series: [{
        type: 'bar',
        barWidth: 15,
        itemStyle: {
            normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                        {offset: 0, color: '#3dabe9'},
                        {offset: 0.5, color: '#40c0ea'},
                        {offset: 1, color: '#0be4ed'}
                    ]
                )
            }
        },
        data: [10, 52, 200, 334, 450]
    }, {
        type: 'bar',
        barGap: '-100%',
        barWidth: 15,
        itemStyle: {
            normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: 'rgba(39,57,104,0.4)'},
                        {offset: 0.2, color: 'rgba(39,57,104,0.4)'},
                        {offset: 1, color: 'rgba(39,57,104,0.4)'}
                    ]
                )
            }
        },
        z: -12,
        data: [390, 390, 390, 390, 390]
    }]
};

/*访客统计*/
var option4 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        icon: 'circle',
        top: 'center',
        data: ['20岁以下', '20-24岁', '25-39岁', '40-55岁', '55岁以上'],
        textStyle: {
            color: ' #fff',
            fontWeight: 'normal',
            fontSize: '12',

        }
    },
    series: [{
        name: '来访统计',
        type: 'pie',
        center: ['45%', '48%'],
        radius: ['45%', '70%'],
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: false,

            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            value: 234,
            name: '20岁以下'
        }, {
            value: 135,
            name: '20-24岁'
        }, {
            value: 148,
            name: '25-39岁'
        }, {
            value: 251,
            name: '40-55岁'
        }, {
            value: 147,
            name: '55岁以上'
        },],
        itemStyle: {
            normal: {
                color: function (params) {
                    // build a color map as your need.
                    var colorList = [
                        '#e4c041', '#df7a40', '#74df5e',
                        '#de3753', '#3453d7', '#7f38de'
                    ];
                    return colorList[params.dataIndex]
                },
            },
        },
    }]
};
/*景区Top5*/
var option5 = {
    //backgroundColor : 'rgba(5, 48, 92, 0.3)',
    title: {
        text: '',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: '18'
        }
    },
    grid: {
        top: '4%',
        /*left: '1%',
        right: '%',*/
        bottom: '3%',
        containLabel: true
    },

    tooltip: {
        trigger: 'axis'
    },
    calculable: true,
    xAxis: [{
        name: '人',
        splitLine: {
            show: false,
        },
        nameTextStyle: {
            color: '#fff',
            fontSize: 10
        },
        type: 'value',
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '12'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#3a4d89',

            }
        }
    }],
    yAxis: [{
        type: 'category',
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '14'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#3a4d89',
            }
        },
        data: ['黔灵山', '观山湖', '时光贵州', '白云公园', '情人谷']
    }],
    series: [{
        type: 'bar',
        barWidth: 15,
        itemStyle: {
            normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                        {offset: 0, color: '#3dabe9'},
                        {offset: 0.5, color: '#40c0ea'},
                        {offset: 1, color: '#0be4ed'}
                    ]
                )
            }
        },
        data: [10, 52, 200, 334, 450]
    }, {
        type: 'bar',
        barGap: '-100%',
        barWidth: 15,
        itemStyle: {
            normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: 'rgba(39,57,104,0.4)'},
                        {offset: 0.2, color: 'rgba(39,57,104,0.4)'},
                        {offset: 1, color: 'rgba(39,57,104,0.4)'}
                    ]
                )
            }
        },
        z: -12,
        data: [390, 390, 390, 390, 390]
    }]
};

let colorArr = [
    ['#8DEE59', '#29C12E'],
    ['#F9CD3C', '#F4DC25'],
    ['#8534B6', '#6D2DCA'],
    ['#17DAD6', '#235FD2'],
    ['#C72C8C', '#D6145D'],
    ['#EE7C18', '#FE892A'],
    ['#90EE90', '#006400'],
];

$(function () {
    var echert1 = echarts.init(document.getElementById("vis_res"));
    var echert3 = echarts.init(document.getElementById("sendmsg_ph"));
    var echert4 = echarts.init(document.getElementById("vis_tj"));
    var echert5 = echarts.init(document.getElementById("top5"));

    echert4.setOption(option4)


    getOption1();//访客驻留分析
    getOption3();//来源地排行
    getOption4();//访客统计
    getOption5();//访景区TOP5
    function getOption1() {
        axios.get(fkzlSis, {
            params: {}
        }).then(function (resp) {
            var str = resp.data.data
            for (let [i, v] of str.entries()) {
                v.itemStyle = {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: colorArr[i][0] // 0% 处的颜色
                        }, {
                            offset: 1, color: colorArr[i][1] // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                };
            }
            var legend = [];
            for (var i = 0; i < str.length; i++) {
                legend[i] = str[i].name
            }
            option1.series[0].data = str;
            option1.legend.data = legend
            echert1.setOption(option1)


        }).catch(function (err) {
            console.log(err)
        })
    }

    function getOption3() {
        axios.get(SourceArea, {
            params: {}
        }).then(function (resp) {
            var str = _.sortBy(resp.data.data, 'value');
            var yAxisData = [];
            var xAxisData = [];
            for (var i = 0; i < str.length; i++) {
                yAxisData[i] = str[i].name;
                xAxisData[i] = str[i].value;
            }
            option3.yAxis[0].data = yAxisData;
            option3.series[0].data = xAxisData
            var max = xAxisData[0];
            var max_lin = []
            for (var i = 0; i < xAxisData.length; i++) {
                if (parseInt(max) < parseInt(xAxisData[i])) {
                    max = xAxisData[i];

                }
            }
            for (var i = 0; i < xAxisData.length; i++) {
                max_lin[i] = max;
            }

            option3.series[1].data = max_lin
            echert3.setOption(option3)
        }).catch(function (err) {
            console.log(err)
        })
    }

    function getOption4() {
        axios.get(GetVisitorCounts, {
            params: {}
        }).then(function (resp) {
            var str = resp.data.data;

            for (let [i, v] of str.age.entries()) {
                v.itemStyle = {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: colorArr[i][0] // 0% 处的颜色
                        }, {
                            offset: 1, color: colorArr[i][1] // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                };
            }

            var sexData = str.sex;
            var man = parseInt(sexData[0].value);
            var woman = parseInt(sexData[1].value);
            var total = man + woman;
            var man_per = ((man / total) * 100).toFixed(2);
            var woman_per = 100 - man_per
            $('.man_sex').css('width', man_per + "%");
            $('.woman_sex').css('width', woman_per + "%");
            $('.man_sex').hover(function () {
                $('.man_hov').css('display', 'block');
                $('.man_num').html(man);
                $('.man_per').html(man_per + "%");
            }, function () {
                $('.man_hov').css('display', 'none');
            })

            $('.woman_sex').hover(function () {
                $('.woman_hov').css('display', 'block');
                $('.woman_num').html(woman);
                $('.woman_per').html(woman_per + "%");
            }, function () {
                $('.woman_hov').css('display', 'none');
            })


            var yearData = str.age;
            var lendNume = []
            for (var i = 0; i < yearData.length; i++) {
                lendNume[i] = yearData[i].name;
                option4.legend.data = lendNume;
            }
            option4.series[0].data = yearData;

            echert4.setOption(option4)

        })

    }

    function getOption5() {
        axios.get(FrontTop5, {
            params: {}
        }).then(function (resp) {
            var str = _.sortBy(resp.data.data, 'value');
            var yAxisData = [];
            var xAxisData = [];
            for (var i = 0; i < str.length; i++) {
                yAxisData[i] = str[i].name;
                xAxisData[i] = str[i].value;
            }
            option5.yAxis[0].data = yAxisData;
            option5.series[0].data = xAxisData
            var max = xAxisData[0];
            var max_lin = []
            for (var i = 0; i < xAxisData.length; i++) {
                if (parseInt(max) < parseInt(xAxisData[i])) {
                    max = xAxisData[i];

                }
            }
            for (var i = 0; i < xAxisData.length; i++) {
                max_lin[i] = max;
            }

            option5.series[1].data = max_lin
            echert5.setOption(option5)
        }).catch(function (err) {
            console.log(err)
        })
    }


    /*显示隐藏地图以外*/
    $(".btnbg").click(function () {
        $('.con_left').hide();
        $('.con_right').hide();
        $('#sstdl').hide();
        $(this).addClass("chose")
        $(".btncontain").removeClass("chose")
    })

    $(".btncontain").click(function () {
        $('.con_left').show();
        $('.con_right').show();
        $('#sstdl').show();
        $(this).addClass("chose")
        $(".btnbg").removeClass("chose")
    })


});